<!DOCTYPE HTML>
<html>
<head>
  <title>Heater Control</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="css/themes/custom-theme.css" />
<link rel="stylesheet" href="css/jqx.base.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/jqxcore.js"></script>
<script src="js/jqxchart.js"></script>
<script src="js/jqxgauge.js"></script>

<style type="text/css">
#gaugeDemo {
    margin: 0 auto;
    margin-top: 0;
    width: 345px;
}
​</style>

<script type="text/javascript">

$(document).ready(function () {
    $('#gaugeContainer').jqxGauge({
        ranges: [{ startValue: 0, endValue: 25, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
                 { startValue: 25, endValue: 50, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
                 { startValue: 50, endValue: 75, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
                 { startValue: 75, endValue: 100, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
        ticksMinor: { interval: 2, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        value: 0,
        max: 100,
        labels: {interval: 10},
        colorScheme: 'scheme05',
        animationDuration: 1200
    });

    $('#gaugeContainer').on('valueChanging', function (e) {
        $('#gaugeValue').text(Math.round(e.args.value*10)/10 + ' %');
    });

    (function worker() {
      $.ajax({
        type: 'POST',
        url: 'mcu.tt', 
        data: {command: 'read_humidity'},
        success: function(textVal) {
          $('#gaugeContainer').jqxGauge('value', Number(textVal));
        },
        complete: function() {
          setTimeout(worker, 3000);
        }
      });
    })();

    (function check_online() {
      $.ajax({
        type: 'GET',
        url: 'check_online_dev',
        success: function(textVal) {
          $('#header-string').html('Heater Control ' + '(' + textVal + ')');
        },
        complete: function() {
          setTimeout(check_online, 20000);
        }
      });
    })();

});
</script>

</head>

<body>
<div data-role="header" data-position="fixed">
    <span class="ui-title" id="header-string">Heater Control</span>
</div>

<div id="gaugeDemo">
    <div id="gaugeValue"></div>
	<div id="gaugeContainer"></div>
</div>

<style>
#gaugeValue {
    position: relative;
    top: 270px;
    left: 132px;
    font-family: Sans-Serif;
    text-align: center;
    font-size: 17px;
    width: 70px;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #f3f3f3));
    background-image: -webkit-linear-gradient(#fafafa, #f3f3f3);
    background-image: -moz-linear-gradient(#fafafa, #f3f3f3);
    background-image: -o-linear-gradient(#fafafa, #f3f3f3);
    background-image: -ms-linear-gradient(#fafafa, #f3f3f3);
    background-image: linear-gradient(#fafafa, #f3f3f3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
    padding: 10px;
}
</style>

<div data-role="footer" data-id="foo1" data-position="fixed">
	<div data-role="navbar">
		<ul>
			<li><a href="temperature.html" rel="external">Temperature</a></li>
			<li><a href="humidity.html" class="ui-btn-active ui-state-persist">Humidity</a></li>
			<li><a href="setting.html" rel="external">Setting</a></li>
		</ul>
	</div><!-- /navbar -->
</div><!-- /footer -->
</body>
</html>
